<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="info"></div>
    <script type="text/javascript">
        function get(url, callback) {
            // 1、创建xhr对象
            var xhr = new XMLHttpRequest()
                // 2、准备请求参数
            xhr.open('get', url)
                // 3、触发请求
            xhr.send(null)
                // 4、监听服务器数据返回

            // var obj = null
            xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // 服务端返回的原始数据是字符串
                        var res = xhr.responseText
                        var obj = JSON.parse(res)
                        callback(obj)
                            // var div = document.getElementById('info')
                            // div.innerHTML = obj.data.length
                            // 这里的return为何不能通过loadData得到数据？
                            // return obj
                    }
                }
                // 如下的return也不行，因为回调函数执行时异步的
                // return obj
        }

        // var ret = loadData()
        // console.log(ret)
        // $.get()
        get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
            console.log(res)
            var div = document.getElementById('info')
            div.innerHTML = res.data.length
        })
    </script>
</body>

</html>